<template>
    <view class="w-full max-w-[750rpx] mx-auto min-h-screen bg-[#f6f8fa] p-[32rpx] box-border">
        <backView />
        <text
            class="block text-[48rpx] font-extrabold mb-[40rpx] text-center text-purple-600 drop-shadow">社会经济学信息详情</text>

        <view v-if="loading" class="loading-container flex justify-center items-center py-[100rpx]">
            <view class="flex flex-col items-center">
                <view
                    class="animate-spin rounded-full h-[80rpx] w-[80rpx] border-t-2 border-b-2 border-purple-500 mb-[20rpx]">
                </view>
                <text class="text-[32rpx] text-gray-500">加载中...</text>
            </view>
        </view>

        <view v-else-if="record" class="detail-card bg-white rounded-[24rpx] shadow-lg p-[40rpx]">
            <!-- 基本信息 -->
            <view class="basic-header mb-[40rpx] text-center">
                <text class="name text-[40rpx] font-bold text-gray-800 mb-[16rpx] block">{{ record.name }}</text>
                <text class="id-number text-[28rpx] text-gray-600">{{ record.idNumber }}</text>
            </view>

            <!-- 详细信息 -->
            <view class="detail-info">
                <!-- 教育职业信息 -->
                <view class="section mb-[40rpx]">
                    <text class="section-title text-[32rpx] font-bold text-purple-600 mb-[20rpx] block">教育职业</text>
                    <view class="info-grid">
                        <view class="info-item mb-[24rpx]">
                            <text class="label text-[28rpx] text-gray-500 block mb-[8rpx]">文化程度</text>
                            <text class="value text-[32rpx] text-gray-800">{{ getEducationLabel(record.education)
                                }}</text>
                        </view>
                        <view class="info-item mb-[24rpx]">
                            <text class="label text-[28rpx] text-gray-500 block mb-[8rpx]">职业</text>
                            <text class="value text-[32rpx] text-gray-800">{{ record.occupation }}</text>
                        </view>
                        <view v-if="record.workUnit" class="info-item mb-[24rpx]">
                            <text class="label text-[28rpx] text-gray-500 block mb-[8rpx]">工作单位</text>
                            <text class="value text-[32rpx] text-gray-800">{{ record.workUnit }}</text>
                        </view>
                    </view>
                </view>

                <!-- 经济信息 -->
                <view class="section mb-[40rpx]">
                    <text class="section-title text-[32rpx] font-bold text-purple-600 mb-[20rpx] block">经济状况</text>
                    <view class="info-grid">
                        <view v-if="record.monthlyIncome" class="info-item mb-[24rpx]">
                            <text class="label text-[28rpx] text-gray-500 block mb-[8rpx]">月收入</text>
                            <text class="value text-[32rpx] text-gray-800">{{ record.monthlyIncome }}元</text>
                        </view>
                        <view v-if="record.familyIncome" class="info-item mb-[24rpx]">
                            <text class="label text-[28rpx] text-gray-500 block mb-[8rpx]">家庭年收入</text>
                            <text class="value text-[32rpx] text-gray-800">{{ record.familyIncome }}元</text>
                        </view>
                        <view v-if="record.economicStatus" class="info-item mb-[24rpx]">
                            <text class="label text-[28rpx] text-gray-500 block mb-[8rpx]">经济状况</text>
                            <text class="value text-[32rpx] text-gray-800">{{
                                getEconomicStatusLabel(record.economicStatus) }}</text>
                        </view>
                    </view>
                </view>

                <!-- 医疗保险 -->
                <view v-if="record.insuranceType" class="section mb-[40rpx]">
                    <text class="section-title text-[32rpx] font-bold text-purple-600 mb-[20rpx] block">医疗保险</text>
                    <view class="info-item mb-[24rpx]">
                        <text class="label text-[28rpx] text-gray-500 block mb-[8rpx]">医疗保险类型</text>
                        <text class="value text-[32rpx] text-gray-800">{{ getInsuranceTypeLabel(record.insuranceType)
                            }}</text>
                    </view>
                </view>

                <!-- 居住信息 -->
                <view class="section mb-[40rpx]">
                    <text class="section-title text-[32rpx] font-bold text-purple-600 mb-[20rpx] block">居住信息</text>
                    <view class="info-grid">
                        <view v-if="record.housingCondition" class="info-item mb-[24rpx]">
                            <text class="label text-[28rpx] text-gray-500 block mb-[8rpx]">住房条件</text>
                            <text class="value text-[32rpx] text-gray-800">{{
                                getHousingConditionLabel(record.housingCondition) }}</text>
                        </view>
                        <view v-if="record.livingArea" class="info-item mb-[24rpx]">
                            <text class="label text-[28rpx] text-gray-500 block mb-[8rpx]">居住面积</text>
                            <text class="value text-[32rpx] text-gray-800">{{ record.livingArea }}平方米</text>
                        </view>
                        <view v-if="record.familyMembers" class="info-item mb-[24rpx]">
                            <text class="label text-[28rpx] text-gray-500 block mb-[8rpx]">家庭成员数</text>
                            <text class="value text-[32rpx] text-gray-800">{{ record.familyMembers }}人</text>
                        </view>
                    </view>
                </view>

                <!-- 备注 -->
                <view v-if="record.note" class="section mb-[40rpx]">
                    <text class="section-title text-[32rpx] font-bold text-purple-600 mb-[20rpx] block">备注</text>
                    <text class="value text-[30rpx] text-gray-800">{{ record.note }}</text>
                </view>
            </view>

            <!-- 操作按钮 -->
            <view class="action-buttons flex gap-[20rpx] mt-[40rpx]">
                <nut-button type="primary"
                    class="flex-1 bg-gradient-to-r from-purple-500 to-purple-600 border-0 rounded-[16rpx] shadow-md"
                    @click="goEdit">
                    编辑
                </nut-button>
                <nut-button type="danger"
                    class="flex-1 bg-gradient-to-r from-red-500 to-red-600 border-0 rounded-[16rpx] shadow-md"
                    @click="deleteRecord">
                    删除
                </nut-button>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import { request } from '@/service/request'
import backView from '@/components/backView.vue'

const loading = ref(false)
const record = ref<any>(null)
const recordId = ref('')

onMounted(async () => {
    const params = Taro.getCurrentInstance().router?.params
    if (params?.id) {
        recordId.value = params.id
        await loadRecord(params.id)
    }
})

async function loadRecord(id: string) {
    loading.value = true
    try {
        const result = await request.get<any>(`/health_records/health_social/healthSocialInfo/queryById?id=${id}`, {}, {
            useErrMsg: true
        })

        if (result.success) {
            record.value = result.success
        }
    } catch (error) {
        console.error('加载记录失败:', error)
        Taro.showToast({ title: '加载记录失败', icon: 'error' })
    } finally {
        loading.value = false
    }
}

// 获取文化程度标签
function getEducationLabel(value: string) {
    const educationMap: Record<string, string> = {
        '1': '文盲或半文盲',
        '2': '小学',
        '3': '初中',
        '4': '高中/中专',
        '5': '大专/本科',
        '6': '研究生及以上'
    };
    return educationMap[value] || value;
}

// 获取经济状况标签
function getEconomicStatusLabel(value: string) {
    const statusMap: Record<string, string> = {
        '1': '贫困',
        '2': '一般',
        '3': '良好',
        '4': '富裕'
    };
    return statusMap[value] || value;
}

// 获取医保类型标签
function getInsuranceTypeLabel(value: string) {
    const insuranceMap: Record<string, string> = {
        '1': '城镇职工基本医疗保险',
        '2': '城镇居民基本医疗保险',
        '3': '新型农村合作医疗',
        '4': '贫困救助',
        '5': '商业医疗保险',
        '6': '全公费',
        '7': '全自费',
        '8': '其他'
    };
    return insuranceMap[value] || value;
}

// 获取住房条件标签
function getHousingConditionLabel(value: string) {
    const housingMap: Record<string, string> = {
        '1': '自建房',
        '2': '购买商品房',
        '3': '租赁房',
        '4': '其他'
    };
    return housingMap[value] || value;
}

function goEdit() {
    Taro.navigateTo({
        url: `./edit?id=${recordId.value}`
    })
}

async function deleteRecord() {
    try {
        const result = await Taro.showModal({
            title: "确认删除",
            content: "确定要删除这条记录吗？",
            confirmText: "删除",
            cancelText: "取消",
        });

        if (result.confirm) {
            await request.delete(
                `/health_records/health_social/healthSocialInfo/delete?id=${recordId.value}`,
                {},
                {
                    useErrMsg: true,
                }
            );

            Taro.showToast({ title: "删除成功", icon: "success" });
            setTimeout(() => {
                Taro.navigateBack()
            }, 1500)
        }
    } catch (error) {
        console.error("删除失败:", error);
        Taro.showToast({ title: "删除失败", icon: "error" });
    }
}
</script>

<style>
.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.section {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 30rpx;
}

.section:last-child {
    border-bottom: none;
}
</style>